<template>
	<view class="cancellation">
		<view class="cancellation-top">
			<view class="top-screening">
				<ms-dropdown-menu class="ms-dropdown-menu">
					<ms-dropdown-item v-model="value" :list="listValue" title="潜力指数" class="ms-dropdown-item">
					</ms-dropdown-item>
					<ms-dropdown-item v-model="time" :list="listTime" title="成立时间" class="ms-dropdown-item">
					</ms-dropdown-item>
					<ms-dropdown-item v-model="money" :list="listMoney" title="注册资金" class="ms-dropdown-item">
					</ms-dropdown-item>
					<ms-dropdown-item :hasSlot="true" title="所选地区" class="ms-dropdown-item" ref="dropdownItem">
						<view class="chosseRobot">
							<picker-view indicator-style="height: 50px;" style="width: 100%; height: 150px;"
								:value="value" @change="bindChange">
								<picker-view-column>
									<view v-for="(item,Index) in provinces" :key="Index">{{item}}</view>
								</picker-view-column>
								<picker-view-column>
									<view v-for="(item,Index) in citys" :key="Index">{{item}}</view>
								</picker-view-column>
								<picker-view-column>
									<view v-for="(item,Index) in areas" :key="Index">{{item}}</view>
								</picker-view-column>
							</picker-view>
							<button class="chosseRobotBtn" @click="chosseAddress">确认</button>
						</view>
					</ms-dropdown-item>
				</ms-dropdown-menu>
				<view class="screening-phone">
					<image src="../../static/icon@3x.png"></image>
					<checkbox-group>
						<checkbox :checked="check" color="#5296fe" style="transform:scale(0.7)"
							@click="choooseMobile" />
					</checkbox-group>
				</view>
			</view>
		</view>
		<view class="screening-count">
			<view class="screening-count-text">为您从全国范围找到{{total}}家公司</view>
		</view>
		<view class="push">
			<view class="push-content" v-for="(item, index) in enterpriseList" :key="index">
				<view class="push-content-list" @click="jumpCompanyInfo(item.name)">
					<view class="push-list">
						<view class="push-company">{{item.name}}</view>
						<view class="push-phone">
							<image src="../../static/btn/icon2@3x.png" class="push-icon" v-if="item.hasMobile == true">
							</image>
							<image src="../../static/btn/icon3@3x.png" class="push-icon-one"
								v-if="item.hasPhone == true && item.hasMobile == false"></image>
							<image src="../../static/btn/icon3@3x.png" class="push-icon"
								v-if="item.hasPhone == true && item.hasMobile == true"></image>
						</view>
					</view>
					<view class="push-list1">
						<view class="push-list-left">
							<view class="push-potential">{{item.potentialValue}}潜力值</view>
							<view class="push-gps">
								<image src="../../static/btn/icon4@3x.png" class="push-icon-gsp"></image>
								<view>{{item.province}}</view>
							</view>
						</view>
						<view class="push-recent" v-if="item.hasBrowse">
							<image src="../../static/btn/icon5@3x.png" class="push-recent-browse"></image>
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		getEnterprise
	} from '../../models/index.js'
	import {
		uniIcons
	} from "@dcloudio/uni-ui";
	import msDropdownMenu from '@/components/ms-dropdown/dropdown-menu.vue'
	import msDropdownItem from '@/components/ms-dropdown/dropdown-item.vue'
	const cityData = require('@/components/gxlcms-area/citydata.json')

	export default {
		components: {
			uniIcons,
			msDropdownMenu,
			msDropdownItem
		},
		data() {
			return {
				enterpriseList: [],
				selectParam: {
					pageIndex: 0,
					pageSize: 10,
				},
				page: 1,
				total: null,
				value: null,
				time: null,
				money: null,
				address: null,
				listValue: [{
						text: '智能排序',
						value: ''
					},
					{
						text: '按潜力指数从高到低',
						value: 'desc'
					},
					{
						text: '按潜力指数从低到高',
						value: 'asc'
					}
				],
				listTime: [{
						text: '智能排序',
						value: ''
					},
					{
						text: '按成立时间从近到远',
						value: 'desc'
					},
					{
						text: '按成立时间从远到近',
						value: 'asc'
					}
				],
				listMoney: [{
						text: '智能排序',
						value: ''
					},
					{
						text: '按注册资金从高到低',
						value: 'desc'
					},
					{
						text: '按注册资金从低到高',
						value: 'asc'
					}
				],
				listAddress: [],
				citysData: cityData,
				provinces: [],
				citys: [],
				areas: [],
				value: [0, 0, 0],
				name: null,
				regionName: false,
				potential: null, //潜力值 desc,asc,null
				registerDate: null, //成立时间	desc,asc,null
				registerFund: null, //注册资金	desc,asc,null
				county: null, //区、市、区，或者市
				hasMobile: null,
				check: false,
				cacheList: []
			}
		},
		watch: {
			//监听筛选条件的改变进行条件查询
			value: function(val) {
				this.potential = val;
				this.getEnterpriseList()
			},
			time: function(val) {
				this.registerDate = val;
				this.getEnterpriseList()
			},
			money: function(val) {
				this.registerFund = val;
				this.getEnterpriseList()
			},
		},
		onLoad(e) {
			this.initData();
			this.getEnterpriseList();
		},
		onShow() {
			this.enterpriseList = []
			this.getEnterpriseList()
		},
		// 下拉到底部后加载新数据
		onReachBottom() {
			//判断下一页是否存在数据，不存在将显示暂无数据等提示语
			if (this.total < this.page * 10) {
				uni.showToast({
					title: '没有更多数据了',
					icon: 'none', //如果要纯文本，不要icon，将值设为'none'
					duration: 2000 //持续时间为 2秒
				})
			} else {
				this.page++
				this.selectParam.pageSize = this.page * 10
				this.getEnterpriseList()
			}
		},
		methods: {
			// 判断是否勾选手机号筛选
			choooseMobile() {
				if (this.check == false) {
					this.check = true
					this.hasMobile = true
					this.getEnterpriseList()
				} else {
					this.check = false
					this.hasMobile = ''
					this.getEnterpriseList()
				}
			},
			// 查询企业数据
			getEnterpriseList() {
				if (this.potential != null) {
					this.selectParam.potential = this.potential
				}
				if (this.county != null) {
					this.selectParam.county = this.county
				}
				if (this.registerDate != null) {
					this.selectParam.registerDate = this.registerDate
				}
				if (this.registerFund != null) {
					this.selectParam.registerFund = this.registerFund
				}
				if (this.hasMobile != null) {
					this.selectParam.hasMobile = this.hasMobile
				}
				// console.log(this.selectParam)
				getEnterprise(this.selectParam).then((res) => {
					// console.log(res.data)
					this.enterpriseList = res.data.results
					this.total = res.data.total
					//清除缓存,查询最近浏览
					this.recent()
				})
			},
			//清除缓存,查询最近浏览
			recent() {
				this.cacheList = uni.getStorageSync('recent_browse');
				// console.log(this.cacheList)
				var time = new Date().toLocaleDateString(); //获取当前年月日
				var year = new Date().getFullYear(); //获取完整的年份(4位)
				var moth = new Date().getMonth(); //获取当前月份(0-11,0代表1月)
				var day = new Date().getDate(); //获取当前日(1-31)
				var time1 = year + '/' + moth + '/' + day //当前时间的前一个月
				// 删除一个月之前的数据
				for (var i = 0; i < this.cacheList.length; i++) {
					if (this.cacheList[i].time <= time1) {
						this.cacheList.splice(i, 1)
						uni.setStorage({
							key: 'recent_browse',
							data: this.cacheList
						});
					}
				}
				for (var i = 0; i < this.cacheList.length; i++) {
					for (var j = 0; j < this.cacheList[i].browse.length; j++) {
						for (var k = 0; k < this.enterpriseList.length; k++) {
							if (this.enterpriseList[k].name == this.cacheList[i].browse[j]) {
								this.enterpriseList[k].hasBrowse = true
							}
						}
					}
				}
			},
			// 企业名称跳转至企业详情页面
			jumpCompanyInfo(name) {
				uni.navigateTo({
					// url: 'test?id=1&name=uniapp’
					url: '../enterpriseDetail/enterpriseDetail?name=' + name
				});
			},
			// 获取选择的地区
			initData() {
				var provinces = [];
				var citys = [];
				var areas = [];

				this.citysData.forEach(function(province, i) {
					provinces.push(province.name);
					if (i === 0) {
						citys.push(province.citys[i].name);
						areas = province.citys[i].areas;
					}
				});

				this.provinces = provinces;
				this.citys = citys;
				this.areas = areas;
			},
			// 滑动地区选择器获取值
			bindChange(e) {
				var citysData = this.citysData;
				var value = this.value;
				var current_value = e.detail.value;
				var citys = [];
				var provinceObj = {};
				var cityObj = {};
				provinceObj = citysData[current_value[0]];

				if (value[0] !== current_value[0]) {
					// 滑动省份
					provinceObj.citys.forEach(function(v) {
						citys.push(v.name);
					});

					this.citys = citys;
					cityObj = provinceObj.citys[0];

					this.areas = cityObj.areas;
					this.value = [current_value[0], 0, 0];
				} else if (value[0] === current_value[0] && value[1] !== current_value[1]) {
					// 滑动城市
					if (current_value[1] >= provinceObj.citys.length) {
						// 数据不存在 跳过
						return;
					}
					cityObj = provinceObj.citys[current_value[1]];
					this.areas = cityObj.areas;
					this.value = [current_value[0], current_value[1], 0];

				} else {
					// 滑动区县
					cityObj = provinceObj.citys[current_value[1]];
					this.value = current_value;

				}
				// this.name = provinceObj.name + cityObj.name + cityObj.areas[this.value[2]];
				this.name = cityObj.areas[this.value[2]];
				this.regionName = true
				// console.log(this.name)
			},
			chosseAddress() {
				if (this.name == null) {
					this.county = this.areas[0]
				} else {
					this.county = this.name
				}
				this.$refs.dropdownItem.closePopup()
				this.getEnterpriseList()
			}
		}
	}
</script>

<style>
	.cancellation {
		padding: 0rpx 5rpx 0;
	}

	.top-screening {
		position: fixed;
		height: 80rpx;
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
		background-color: #FFFFFF;
		z-index: 9999;
	}

	.ms-dropdown-item {
		height: 80rpx;
		width: 160rpx;
		font-size: 30rpx;
		color: #b9b9b9;
		display: flex;
		align-items: center;
	}

	.ms-dropdown-item .selected__name {
		font-size: 30rpx !important;
		color: #b9b9b9;
	}

	.ms-dropdown-item .iconfont {
		font-size: 30rpx !important;
		color: #b9b9b9;
	}

	.selected__icon {
		margin-left: 5rpx !important;
	}

	.ms-dropdown-item .dropdown-item__selected {
		padding: 0rpx;
	}


	.screening-phone {
		height: 80rpx;
		width: 93rpx;
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: space-between;
	}

	image {
		width: 30rpx;
		height: 34rpx;
		object-fit: contain;
	}

	.chosseRobot {
		padding: 0 50rpx;
	}

	picker-view-column {
		text-align: center;
		line-height: 50px;
	}

	.screening-count {
		height: 20rpx;
		width: 100%;
		position: fixed;
		padding-top: 80rpx;
		padding-bottom: 10rpx;
		background-color: #FFFFFF;
	}

	.screening-count-text {
		font-size: 22rpx;
		line-height: 20rpx;
		color: #cdcdcd;
	}

	.chosseRobotBtn {
		background-color: #007AFF;
		color: #FFFFFF;
		margin: 20rpx 0;
	}

	.push {
		padding-top: 100rpx;
	}

	.push-content-list {
		margin-top: 20rpx;
	}

	.push-list {
		display: flex;
		flex-wrap: nowrap;
		align-items: flex-end;
		height: 50rpx;
		justify-content: space-between;
		padding: 10rpx 26rpx 0
	}

	.push-list1 {
		display: flex;
		flex-wrap: nowrap;
		align-items: flex-end;
		height: 50rpx;
		justify-content: space-between;
		padding: 0 26rpx 10rpx
	}

	.push-list-left {
		display: flex;
		flex-wrap: nowrap;
		align-items: flex-end;
		width: 420rpx;
		justify-content: space-between;
	}

	.push-company {
		font-size: 34rpx;
		width: 570rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.push-potential {
		font-size: 28rpx;
		color: red;
	}

	.push-phone {
		height: 50rpx;
		width: 120rpx;
	}

	.push-gps {
		height: 50rpx;
		display: flex;
		flex-wrap: nowrap;
		align-items: flex-end;
	}

	.push-icon {
		width: 25rpx;
		height: 25rpx;
		padding: 18rpx;
	}

	.push-icon-one {
		width: 25rpx;
		height: 25rpx;
		padding: 18rpx;
		float: right;
	}

	.push-icon-gsp {
		width: 25rpx;
		height: 32rpx;
		padding: 4rpx 10rpx;
	}

	.push-recent {
		height: 50rpx;
	}

	.push-recent-browse {
		width: 115rpx;
		height: 43rpx;
		padding: 6rpx;
	}
</style>
